@include keyframes(animate-in-scale-up) {
  0% {
    @include transform(scale(0));
  }
}

@mixin dashboard-common {

  .valo-menu {
    border-right: none;

    .badgewrapper {
      position: relative;
      padding: 0 !important;
    }

    .v-ddwrapper {
      display: block;
    }
  }

  .valo-menu-item {
    overflow: hidden;
  }

  .v-ui[width-range~="0-800px"] {
    .valo-menu-title {
      @include valo-gradient($color: $valo-menu-background-color);
      border-bottom-color: first-color(valo-border($color: $valo-menu-background-color));
    }
    .valo-menu .v-menubar-user-menu {
      color: inherit;
    }
  }

  .v-ui[width-range~="801px-"] {
    .valo-menu {
      @include animation(valo-animate-in-slide-right 700ms 700ms backwards);
    }

    .valo-menu-title {
      background: transparent;
      @include box-shadow(none);
      border-bottom: none;
    }
  }

  .valo-menu-title {
    line-height: 1.2;
  }

  .v-menubar-user-menu:after {
    display: none;
  }

  .v-menubar-user-menu > .v-menubar-menuitem {
    display: block;
    padding: 0;
    max-width: 90%;
    margin: 0 auto;

    .v-menubar-menuitem-caption:after {
      margin-right: -1em;
    }

    img.v-icon {
      @if is-dark-color($valo-menu-background-color) {
        border: none;
      }
    }
  }

  .v-ui[width-range~="0-800px"] {
    .v-menubar-user-menu > .v-menubar-menuitem {
      max-width: none;
      margin-right: .5em;

      .v-menubar-menuitem-caption:after {
        margin-right: 0;
      }
    }
  }

  .valo-menu .valo-menu-badge,
  .dashboard-view .notifications.unread .v-button-caption {
    @include valo-badge-style;
    position: absolute;
    right: round($v-unit-size/3);
    font-size: round($v-font-size * 0.9);
    pointer-events: none;
  }

  .dashboard-view .notifications.unread .v-button-caption {
    display: block;
    top: round($v-unit-size / -5);
    right: round($v-unit-size / -5);
    display: block;
    z-index: 1;
  }

  .profile-window {
    max-height: round(30 * $v-font-size);
    width: round(45 * $v-font-size);
    max-width: 90%;

    .v-tabsheet-content > div > .v-scrollable > .v-layout {
      padding-left: $v-layout-margin-left;
      padding-right: $v-layout-margin-right;
    }

    @include width-range($max: 700px) {
      .profile-form > .v-expand {
        padding-left: 0 !important;

        > .v-slot {
          display: block;
          margin-left: 0 !important;
        }
        > .v-spacing {
          height: $v-layout-spacing-vertical;
        }
      }
    }

    @include width-range($max: 600px) {
      .v-tabsheet-content > div > .v-scrollable > .v-layout {
        padding-left: round($v-layout-margin-left / 2);
        padding-right: round($v-layout-margin-left / 2);
      }
      .v-formlayout > table,
      .v-formlayout > table > tbody,
      .v-formlayout-row {
        display: block;
      }
      .v-formlayout > table > tbody {
        .v-formlayout-captioncell,
        .v-formlayout-errorcell,
        .v-formlayout-contentcell {
          display: inline-block;
          height: auto;
        }
        .v-formlayout-captioncell,
        .v-formlayout-errorcell {
          border-bottom: none;
          line-height: 1;
          padding-left: 0;
          padding-top: $v-layout-spacing-vertical;
          text-align: left;
        }
        .v-caption-h4 {
          height: 0;
        }
        .v-label-h4 {
          position: static;
        }
        .v-horizontallayout {
          height: auto !important;
        }
      }
    }
  }

  .moviedetailswindow {
    max-height: round(30 * $v-font-size);
    width: round(45 * $v-font-size);
    max-width: 90%;

    .cover,
    .v-slot-cover {
      max-width: 100%;
      width: 200px;
      position: relative;
    }

    .cover {
      @include box-shadow(valo-bevel-and-shadow($shadow: $v-overlay-shadow));
      border-radius: $v-border-radius;
    }

    .v-slot-cover {

      &:after {
        content: "";
        display: block;
        background: url(img/poster-gloss.png) no-repeat top right;
        background-size: contain;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }

    @include width-range($max: round(40 * $v-font-size)) {
      .v-expand {
        padding-left: 0 !important;
      }

      .v-slot {
        display: block;
      }

      .v-slot-cover {
        margin: 0 auto !important;
      }
    }

    .v-button-link {
      padding: 0;
      height: auto;
    }

  }

  .vaadin-chart {
  	transform: translateZ(0);
  }

  .viewheader {
    padding-bottom: $view-padding;
    width: 100%;
    text-align: right;
    white-space: normal;

    .v-slot-h1 {
      float: left;
    }

    .h1 {
      white-space: normal;
    }

    @include width-range($max: 700px) {
      padding-bottom: round($v-unit-size / 2);
      text-align: left;

      .v-slot-h1 {
        float: none;
      }

      .h1 {
        font-size: round($v-font-size--h1 * 0.8);
      }

      > .v-slot {
        display: block;
      }

      .toolbar {
        white-space: normal;

        > .v-spacing {
          height: round($v-unit-size / 4);
        }
      }
    }
  }

  .v-caption.v-caption-caption-on-left {
    display: inline-block;
    vertical-align: middle;
    line-height: 37px;
    margin-right: $v-layout-spacing-horizontal;
  }


  // iOS7 & iOS8 status bar needs more space
  .v-ios7,
  .v-ios8 {
    .v-ui {
      @include box-sizing(border-box);
      padding-top: 20px;
      background-color: $valo-menu-background-color;

      > .v-widget {
        position: relative !important;
      }
    }
    .valo-menu-title {
      padding-top: 10px;
    }
    .view-content {
      border-top-left-radius: $v-border-radius;
      background-color: $v-app-background-color;
    }
  }

  .v-ios7 & .v-ui[width-range~="0-800px"],
  .v-ios8 & .v-ui[width-range~="0-800px"] {
    padding-top: 20px + $v-unit-size;

    .v-loading-indicator {
      top: 20px + $v-unit-size - 3px;
      height: 3px;
    }

    .valo-menu-title {
      height: 20px + $v-unit-size !important;
      padding-top: 20px;
    }
    .valo-menu-toggle,
    .user-menu {
      margin-top: 20px;
    }
    .valo-menuitems {
      top: 20px + $v-unit-size;
    }
    .view-content {
      border-radius: 0;
    }
  }
}
